<template>
  <section class="my-address">
    <van-swipe-cell :right-width="65" v-for="item in list" :key="item.addrId">
      <div
        class="item flex flex-between flex-middle"
      >
        <div @click="checkedAddress(item)" class="item-left">
          <div class="flex">
            <div class="name">{{item.contactsName}}</div>
            <div class="phone">{{item.phone}}</div>
            <div
              class="tag"
              v-show="item.isDefault==1"
            >默认</div>
          </div>
          <div class="desc">{{item.dtlAddr}}</div>
        </div>
        <div class="right" @click="routerTo(0,item.addrId)">
          <img
            class="icon"
            src="/static/images/address.png"
            @click.stop="routerTo(0,item.addrId)"
          >
        </div>
      </div>
      <view
        slot="right"
        class="del"
        @click="delAddr(item.addrId)"
      >删除</view>
    </van-swipe-cell>
    <button
      class="add-new"
      @click="routerTo(1)"
    >添加新地址</button>
  </section>
</template>
<script>
export default {
  data() {
    return {
      list: []
    };
  },
  onShow() {
    this.getAddrList();
  },
  methods: {
    routerTo(type, id) {
      if (id) {
        wx.navigateTo({ url: '../addaddress/main?id=' + id + '&type=' + type });
      } else {
        wx.navigateTo({ url: '../addaddress/main?type=' + type });
      }
    },
    getAddrList() {
      this.$api.getAddrList().then((res) => {
        this.list = res.data.addrList;
      })
    },
    delAddr(addrId) {
      var _this = this;
      wx.showModal({
        title: '删除', //提示的标题,
        content: '确定删除此地址？', //提示的内容,
        showCancel: true, //是否显示取消按钮,
        cancelText: '取消', //取消按钮的文字，默认为取消，最多 4 个字符,
        cancelColor: '#000000', //取消按钮的文字颜色,
        confirmText: '确定', //确定按钮的文字，默认为取消，最多 4 个字符,
        confirmColor: '#3BB8FD', //确定按钮的文字颜色,
        success: res => {
          if (res.confirm) {
            _this.$api.delAddr({ addrId }).then((res) => {
              _this.getAddrList();
            })
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      });

    },
    checkedAddress(item) {
      const params = this.$getQuery();
      if (params.isPay) {
        this.globalData.addressInfo = item;
        wx.navigateBack({
          delta: 1
        });
      } else {
        routerTo(0,item.addrId)
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.my-address {
  .item {
    margin-top: 15px;
    background: white;
    padding: 15px;
    .right {
      height: 40px;
      border-left: 1px solid #e9e9e9;
      .icon {
        margin-top: 10px;
        width: 20px;
        height: 20px;
        padding-left: 15px;
      }
    }
    .tag {
      width: 30px;
      height: 14px;
      background: rgba(59, 184, 253, 1);
      border-radius: 2px;
      font-size: 12px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 14px;
      text-align: center;
    }
    .name,
    .phone {
      font-size: 15px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(64, 68, 76, 1);
      line-height: 15px;
    }
    .phone {
      margin: 0 10px;
    }
    .desc {
      font-size: 12px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(193, 196, 201, 1);
      line-height: 13px;
      margin-top: 15px;
    }
  }
  .del {
    color: #fff;
    background-color: #f44;
    border: 1px solid #f44;
    height: 100%;
    width: 65px;
    text-align: center;
    line-height: 70px;
  }
  .add-new {
    width: 345px;
    height: 44px;
    line-height: 44px;
    background: rgba(59, 184, 253, 1);
    border-radius: 5px;
    position: fixed;
    bottom: 40px;
    left: 15px;
    font-size: 15px;
    font-family: PingFang;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
  }
}
.item-left {
  flex: 1;
}
</style>
<style lang="scss">
page {
  background: #f7f7f7;
}
</style>